<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>错题专项练习</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f0f0f0; }
        #header { text-align: center; margin-bottom: 30px; }
        #wrongbook-list { margin-bottom: 20px; }
        .wrong-item { margin-bottom: 8px; }
        button { background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; }
        button:hover { background-color: #0056b3; }
        #back-btn { background: #888; margin-bottom: 20px; }
        #back-btn:hover { background: #444; }
        #practice-container { background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); margin-top: 20px; }
    </style>
</head>
<body>
    <!-- 错题本页面，展示和练习用户的错题 -->
    <div id="header">
        <!-- 返回主菜单按钮和标题 -->
        <button id="back-btn" onclick="location.href='main.html'">返回主菜单</button>
        <h1>错题专项练习</h1>
    </div>
    <ul id="wrongbook-list"></ul>
    <!-- 随机抽一道错题进行练习 -->
    <button onclick="practiceWrongBook()">随机抽一道错题练习</button>
    <div id="practice-container" style="display:none;">
        <div id="practice-text"></div>
        <textarea id="practice-input" placeholder="在这里输入上面的文字..." oninput="checkPracticeInput()"></textarea>
        <div id="practice-feedback"></div>
    </div>
    <script>
        // 登录校验，未登录自动跳转
        if (!localStorage.getItem('isLoggedIn')) { window.location.href = 'login.html'; }
        let wrongBook = [];
        /**
         * 加载当前用户的错题本
         */
        function loadWrongBook() {
            const user = localStorage.getItem('currentUser') || 'default';
            const data = localStorage.getItem('wrongbook_' + user);
            wrongBook = data ? JSON.parse(data) : [];
        }
        /**
         * 渲染错题列表
         */
        function renderWrongBookList() {
            const list = document.getElementById('wrongbook-list');
            list.innerHTML = '';
            if (wrongBook.length === 0) {
                list.innerHTML = '<li>暂无错题，继续加油！</li>';
                return;
            }
            wrongBook.forEach(item => {
                const li = document.createElement('li');
                li.className = 'wrong-item';
                li.textContent = `错字：${item.char}，你输入：${item.input}，上下文：...${item.context}...`;
                list.appendChild(li);
            });
        }
        /**
         * 随机抽一道错题进行练习
         */
        function practiceWrongBook() {
            if (wrongBook.length === 0) return;
            const random = wrongBook[Math.floor(Math.random() * wrongBook.length)];
            document.getElementById('practice-container').style.display = 'block';
            document.getElementById('practice-text').textContent = random.context;
            document.getElementById('practice-input').value = '';
            document.getElementById('practice-feedback').textContent = '';
            document.getElementById('practice-input').disabled = false;
            document.getElementById('practice-input').focus();
        }
        /**
         * 检查练习输入内容，给出反馈
         */
        function checkPracticeInput() {
            const text = document.getElementById('practice-text').textContent;
            const input = document.getElementById('practice-input').value;
            let feedback = '';
            for (let i = 0; i < input.length; i++) {
                if (input[i] !== text[i]) {
                    feedback = `第${i+1}个字错误，应为：${text[i]}`;
                    break;
                }
            }
            if (input.length === text.length && feedback === '') {
                feedback = '恭喜你，全部正确！';
            }
            document.getElementById('practice-feedback').textContent = feedback;
        }
        // 初始化错题本和列表
        loadWrongBook();
        renderWrongBookList();
    </script>
</body>
</html> 